<template>
	<div class="finance-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
			<div class="property-main">
				<!-- 左边 -->
				<div class="dataScreen-lf">
					<div class="lf-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['资金计划执行情况']">
						</ItemTitle>
						<div class="lf-top-cn">
							<div v-for="item in leftTopArr" class="item-box">
								<div>
									<img src="@/assets/screenImg/retireImg/icon1.png" alt="" />
								</div>
								<div>
									<div class="title-box">
										<span class="textColor">{{ item.title }}</span>
									</div>
									<div class="num-box">
										<span class="numColor">{{ item.value }}</span>
										<span class="numColor unit">{{ item.unit }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="lf-center">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['应收情况']">
							<template #rightCnBox>
								<div class="select-box">
									<SelectTool
										:optionsArr="selectArr[0]"
										:getWidth="'100'"
										:modelValue="leftCondition.nursing_home_name"
										@update:modelValue="
											(v) => fetchLeftTop2(v, 'nursing_home_name')
										"
									></SelectTool>
								</div>
							</template>
						</ItemTitle>
						<div class="lf-center-cn">
							<div class="num-contain">
								<span class="title">应收总数：</span>
								<span class="num">
									{{ changeNumToWan(letTop2Data.receivable_sum) }}万元</span
								>
							</div>
							<leftChart1 ref="leftChart1Ref"></leftChart1>
						</div>
					</div>
					<div class="lf-bottom">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['核销收入情况']">
							<template #rightCnBox>
								<div class="select-box">
									<SelectTool
										:optionsArr="selectArr[1]"
										:getWidth="'100'"
										:modelValue="leftCondition2.nursing_home_name"
										@update:modelValue="
											(v) => fetchLeftTop3(v, 'nursing_home_name')
										"
									></SelectTool>
								</div>
							</template>
						</ItemTitle>
						<div class="lf-bottom-cn">
							<div class="num-contain">
								<span class="title">核销总数：</span>
								<span class="num">
									{{ changeNumToWan(letTop2Data2.write_off_sum) }}万元</span
								>
							</div>
							<leftChart2 ref="leftChart2Ref"></leftChart2>
						</div>
					</div>
				</div>
				<!-- 中间 -->
				<div class="dataScreen-ct">
					<div class="ct-top">
            <timeRange @timeSelect="timeChange" />
						<div class="ct-top-cn m-t10">
							<div class="top-cn-top">
								<div v-for="item in centerData" class="item-box">
									<div class="lf-icon">
										<img
											src="@/assets/screenImg/projectImg/center/pic1.png"
											alt=""
										/>
									</div>
									<div class="rg-desc">
										<div class="img">
											<img :src="item.title" alt="" />
											<div v-show="item.sign" class="m-l5">
												<img :src="getSign(item.sign)" alt="" />
												<span
													:style="{
														color: item.sign === 'up' ? '#10FF0E' : '#F50000',
													}"
												>
													{{ item.rate }}%
												</span>
											</div>
										</div>
										<div class="text">
											<span class="numColor">{{ item.value }}</span>
											<span class="numColor unit">万元</span>
										</div>
									</div>
								</div>
							</div>
							<div class="top-cn-bottom">
								<mapBox :map-data="mapData" :show-info="false"></mapBox>
							</div>
						</div>
					</div>
					<div class="ct-center">
						<div style="width: 70%">
							<ItemTitle
								:itemTitleImg="postItemTitleImgObj['应收核销对比情况']"
							>
								<template #rightCnBox>
									<div class="select-box">
										<SelectTool
											:optionsArr="selectArr[2]"
											:getWidth="'100'"
											:modelValue="centerCondition.nursing_home_name"
											@update:modelValue="
												(v) => fetchCenterTop1(v, 'nursing_home_name')
											"
										></SelectTool>
									</div>
								</template>
							</ItemTitle>
						</div>
						<div class="ct-center-cn">
							<centerChart ref="centerChartRef"></centerChart>
						</div>
					</div>
					<div class="ct-bottom">
						<div style="width: 70%">
							<ItemTitle
								:itemTitleImg="postItemTitleImgObj['欠费情况']"
							></ItemTitle>
						</div>
						<div class="ct-bottom-cn">
							<scroll-board
								:config="configData"
								:style="{ width: '100%', height: tableHeight + 'px' }"
							/>
							<!-- <el-table
								:data="tableData"
								style="width: 100%"
								:max-height="tableHeight"
								header-row-class-name="table-head"
								row-class-name="table-row"
								class="table-box"
							>
								<el-table-column prop="id" label="序号">
									<template #default="scope">
										<div class="coloumn-one">
											<img
												src="@/assets/screenImg/retireImg/icon3.gif"
												alt=""
											/>
											<span>
												{{ scope.$index + 1 }}
											</span>
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="name" label="名字" />
								<el-table-column prop="amount" label="欠费金额">
									<template #default="scope">
										<span> {{ scope.amount || 0 }}元 </span>
									</template>
								</el-table-column>
							</el-table> -->
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="dataScreen-rg">
					<div class="rg-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['入院情况']">
							<template #rightCnBox>
								<div class="select-box">
									<SelectTool
										:optionsArr="selectArr[3]"
										:getWidth="'100'"
										:modelValue="rightCondition.nursing_home_name"
										@update:modelValue="
											(v) => fetchRightTop1(v, 'nursing_home_name')
										"
									></SelectTool>
								</div>
							</template>
						</ItemTitle>
						<div class="rg-top-cn">
							<div v-for="item in rightTopArr" class="item-box">
								<div>
									<img src="@/assets/screenImg/retireImg/icon2.png" alt="" />
								</div>
								<div>
									<img :src="item.title" alt="" />
									<div>
										<span class="num-color">{{ item.value }}</span>
										<img :src="item.unit" alt="" class="unit-img" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="rg-center">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['食客客流量']">
						</ItemTitle>
						<div class="rg-center-cn">
							<div class="num-contain right">
								<span class="title">当月客流量：</span>
								<span class="num"> {{ currentDayData.number || 0 }}人</span>
							</div>
							<rightChart1 ref="rightChart1Ref"></rightChart1>
						</div>
					</div>
					<div class="rg-bottom">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['食堂销售情况']">
						</ItemTitle>
						<div class="rg-bottom-cn">
							<rightChart2 ref="rightChart2Ref"></rightChart2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import ScreenHeader from "../components/ScreenHeader";
import { getScale, calcHeight } from "../utils/handelScreen";
import ItemTitle from "../finance/components/ItemTitle.vue";
import SelectTool from "../components/SlecetTool";
import { ElTable } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import mapBox from "../property/components/map.vue";
import { changeNumToWan } from "../utils/handelScreen";
import leftChart1 from "./components/leftChartCenter.vue";
import leftChart2 from "./components/leftChartBottom.vue";
import centerChart from "./components/centerChart.vue";
import rightChart1 from "./components/rightChartCenter.vue";
import rightChart2 from "./components/rightChartBottom.vue";
import timeRange from "../components/timeRange.vue";
import {
	zjjhzxqk,
	ysqk,
	hxsrqk,
	ylzl,
	yshxdbqk,
	qfqk,
	ryqk,
	stkll,
	stxsqk,
	ylfbt,
} from "./service";
const postTitleImg = require("@/assets/screenImg/retireImg/headTitle.png");
const postItemTitleImgObj = reactive({
	资金计划执行情况: require("@/assets/screenImg/retireImg/title1.png"),
	应收情况: require("@/assets/screenImg/retireImg/title2.png"),
	核销收入情况: require("@/assets/screenImg/retireImg/title3.png"),
	应收核销对比情况: require("@/assets/screenImg/retireImg/title4.png"),
	欠费情况: require("@/assets/screenImg/retireImg/title5.png"),
	入院情况: require("@/assets/screenImg/retireImg/title6.png"),
	食客客流量: require("@/assets/screenImg/retireImg/title7.png"),
	食堂销售情况: require("@/assets/screenImg/retireImg/title8.png"),
});
const currentYear = new Date().getFullYear();
const leftChart1Ref = ref();
const leftChart2Ref = ref();
const centerChartRef = ref();
const rightChart1Ref = ref();
const rightChart2Ref = ref();
// 下拉框
let selectArr = ref([
	[
		{
			label: "全部",
			value: "全部",
		},
		{
			label: "锦城",
			value: "锦城",
		},
		{
			label: "丰收",
			value: "丰收",
		},
	],
	[
		{
			label: "全部",
			value: "全部",
		},
		{
			label: "锦城",
			value: "锦城",
		},
		{
			label: "丰收",
			value: "丰收",
		},
	],
	[
		{
			label: "全部",
			value: "全部",
		},
		{
			label: "锦城",
			value: "锦城",
		},
		{
			label: "丰收",
			value: "丰收",
		},
	],
	[
		{
			label: "全部",
			value: "全部",
		},
		{
			label: "锦城",
			value: "锦城",
		},
		{
			label: "丰收",
			value: "丰收",
		},
	],
]);

let leftTopArr = ref([
	{
		title: "实际支出",
		value: 0,
		unit: "万元",
	},
	{
		title: "计划支出",
		value: 0,
		unit: "万元",
	},
	{
		title: "支出达成率",
		value: 0,
		unit: "%",
	},
]);

// 左侧 - 资金计划执行情况
const fetchLeftTop = () => {
	zjjhzxqk({ year: currentYear })
		.then((resp) => {
			const {
				real_expenditure = 0,
				plan_expenditure = 0,
				achievement_rate = 0,
			} = resp || {};
			leftTopArr.value[0].value = changeNumToWan(real_expenditure);
			leftTopArr.value[1].value = changeNumToWan(plan_expenditure);
			leftTopArr.value[2].value = 100 * achievement_rate;
		})
		.catch((e) => {});
};
// 左侧 - 应收情况
let leftCondition = ref({
	year: currentYear,
	nursing_home_name: "全部",
});
let letTop2Data = ref({
	receivable_sum: 0,
});
const fetchLeftTop2 = (val, key) => {
	val && key && (leftCondition.value[key] = val);
	const { year, nursing_home_name } = leftCondition.value;
	ysqk({ year, nursing_home_name })
		.then((resp) => {
			letTop2Data.value = resp || {};
			screenChartObj.chart1 = leftChart1Ref.value?.initPieChart(resp);
		})
		.catch((e) => {});
};

// 左侧核销收入情况
let leftCondition2 = ref({
	year: currentYear,
	nursing_home_name: "全部",
});
let letTop2Data2 = ref({
	write_off_sum: 0,
});
const fetchLeftTop3 = (val, key) => {
	val && key && (leftCondition2.value[key] = val);
	// console.log("===ok");
	const { year, nursing_home_name } = leftCondition2.value;
	hxsrqk({ year, nursing_home_name })
		.then((resp) => {
			letTop2Data2.value = resp || {};
			screenChartObj.chart2 = leftChart2Ref.value?.initPieChart(resp);
		})
		.catch((e) => {});
};

// 中间 - 养老汇总
let centerData = ref([
	{
		title: require("@/assets/screenImg/retireImg/text1.png"),
		value: 0,
		sign: "up",
		rate: 0,
	},
	{
		title: require("@/assets/screenImg/retireImg/text2.png"),
		value: 0,
	},
	{
		title: require("@/assets/screenImg/retireImg/text3.png"),
		value: 0,
	},
	{
		title: require("@/assets/screenImg/retireImg/text4.png"),
		value: 0,
	},
]);
const fetchMiddleData1 = () => {
	ylzl({ year: currentYear })
		.then((resp) => {
			const {
				retirement_expenditure = 0,
				jincheng_expenditure = 0,
				retirement_expenditure_rate = 0,
				division_expenditure = 0,
				foison_expenditure = 0,
			} = resp;
			centerData.value[0].value = changeNumToWan(retirement_expenditure);
			centerData.value[0].rate = Math.round(retirement_expenditure_rate * 100);
			centerData.value[0].sign =
				+retirement_expenditure_rate < 0 ? "down" : "up";
			centerData.value[1].value = changeNumToWan(division_expenditure);
			centerData.value[2].value = changeNumToWan(foison_expenditure);
			centerData.value[3].value = changeNumToWan(jincheng_expenditure);
		})
		.catch((e) => {});
};

// 中间 - 应收核销对比情况
let centerCondition = ref({
	year: currentYear,
	nursing_home_name: "全部",
});
let centerData1 = ref({
	write_off_sum: 0,
});
const fetchCenterTop1 = (val, key) => {
	val && key && (centerCondition.value[key] = val);
	const { year, nursing_home_name } = centerCondition.value;
	yshxdbqk({ year, nursing_home_name })
		.then((resp) => {
			centerData1.value = resp || {};
			screenChartObj.chart3 = centerChartRef.value?.initChart(resp);
		})
		.catch((e) => {});
};

let getSign = (i) => {
	let img = ref({
		upImg: require("@/assets/screenImg/commonImg/up.png"),
		downImg: require("@/assets/screenImg/commonImg/down.png"),
	});
	if (i === "up") {
		return img.value.upImg;
	} else if (i === "down") {
		return img.value.downImg;
	}
};
// 地图数据
let mapData = ref([]);
let fetchMapData = () => {
	ylfbt()
		.then((resp = []) => {
			// console.log("==", resp);
			const arr = resp.map((item) => {
				const { nursing_home_name: name, longitude: lng, latitude: lat } = item;
				return {
					src: require("@/assets/screenImg/propertyImg/center/icon1.png"), //pink 其他（按点位展示学校/医院、实验室、轻松驿站、双塔、网球中心、文体中心）
					lng,
					lat,
					name,
				};
			});
			mapData.value.splice(0);
			mapData.value.push(...arr);
		})
		.catch((e) => {});
};

let tableHeight = ref();

// 中间 - 欠费情况
let tableData = ref([]);
let configData = ref({
	header: [
		`<span></span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #40C5F1;'>序号</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #40C5F1;'>名字</span>`,
		`<span style='font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: #40C5F1;'>欠费金额</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: ["center", "center", "center", "center"],
	columnWidth: [150,100],
	rowNum: 5,
});

const fetchCenterTop2 = () => {
	qfqk()
		.then((resp = []) => {
			tableData.value.splice(0);
			tableData.value.push(...resp);
			configData.value.data = resp.map((item, index) => {
				let i = index + 1 < 10 ? "0" + (index + 1) : index + 1;
				return [
					`<div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;"><img src="${require("@/assets/screenImg/retireImg/icon3.gif")}" alt="" style="width: 30px;height: 30px;"/></div>`,
					`<span style='font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;color: #D8F0FF;'>${i}</span>`,
					`<span style='font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;color: #D8F0FF;'>${item.name}</span>`,
					`<span style='font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;color: #D8F0FF;'>
            ${item.amount || 0}元</span>`,
				];
			});
		})
		.catch((e) => {});
};

let timeChange = (time) => {
	console.log(time);
};

// 右侧 - 入院情况
let rightCondition = ref({
	year: currentYear,
	nursing_home_name: "全部",
});
let rightTopArr = ref([
	{
		title: require("@/assets/screenImg/retireImg/name1.png"),
		value: 0,
		unit: require("@/assets/screenImg/retireImg/unit1.png"),
	},
	{
		title: require("@/assets/screenImg/retireImg/name2.png"),
		value: 0,
		unit: require("@/assets/screenImg/retireImg/unit1.png"),
	},
	{
		title: require("@/assets/screenImg/retireImg/name3.png"),
		value: 0,
		unit: require("@/assets/screenImg/retireImg/unit1.png"),
	},
	{
		title: require("@/assets/screenImg/retireImg/name4.png"),
		value: 0,
		unit: require("@/assets/screenImg/retireImg/unit2.png"),
	},
]);
const fetchRightTop1 = (val, key) => {
	val && key && (rightCondition.value[key] = val);
	const { year, nursing_home_name } = rightCondition.value;
	ryqk({ year, nursing_home_name })
		.then((resp) => {
			const {
				capacity = 0,
				actual_number = 0,
				vacant_house = 0,
				admission_rate = 0,
			} = resp || {};
			rightTopArr.value[0].value = capacity;
			rightTopArr.value[1].value = actual_number;
			rightTopArr.value[2].value = vacant_house;
			rightTopArr.value[3].value = Math.round(100 * admission_rate);
		})
		.catch((e) => {});
};

// 右侧 - 食堂客流量
let currentDayData = ref({
	number: 0,
});
const fetchCurrentDayData = () => {
	const t = new Date();
	const params = {
		year: t.getFullYear(),
		month: t.getMonth() + 1,
		// day: t.getDate(),
	};
	stkll(params, 1)
		.then((resp) => {
			// console.log("day", resp);
			currentDayData.value = resp || {};
		})
		.catch((e) => {});
	stkll({ year: currentYear })
		.then((resp) => {
			screenChartObj.chart4 = rightChart1Ref.value?.initChart(resp);
		})
		.catch((e) => {});
};

// 右侧 - 食堂销售情况
let fetchRightTop2 = () => {
	stxsqk({ year: currentYear })
		.then((resp) => {
			screenChartObj.chart5 = rightChart2Ref.value?.initChart(resp);
		})
		.catch((e) => {});
};

const screenChartObj = reactive({
	chart1: null,
	chart2: null,
	chart3: null,
	chart4: null,
	chart5: null,
});
const initAllCharts = () => {
	fetchLeftTop();
	fetchLeftTop2();
	fetchLeftTop3();
	fetchMiddleData1();
	fetchCenterTop1();
	fetchCenterTop2();
	fetchRightTop1();
	fetchCurrentDayData();
	fetchRightTop2();
	fetchMapData();
};

const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};
onMounted(() => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;
		window.addEventListener("resize", screenResize);
		nextTick(() => {
			tableHeight.value = calcHeight("ct-bottom-cn");
			initAllCharts();
		});
	}
});
onBeforeUnmount(() => {
	window.removeEventListener("resize", screenResize);
});
</script>
<style lang="scss" scoped>
@import "./retirement.scss";
</style>
